<template>
    <div>
        <div class="activity-right" @click="hideSel($event)" style="padding-top:20px;">
            <h1>商品列表</h1>
            <el-form ref="form" style="width:80%;" :model="form" label-width="100px">
                <el-select style="width:400px" @change="handlChangeStatus" v-model="listStatus" placeholder="选择商品状态">
                    <el-option v-for="item in position" :key="item.label" :label="item.value" :value="item.label">
                    </el-option>
                </el-select>
                <el-input class='search-input' style="width:30%" @keyup.enter.native="searchGoods"  clearable prefix-icon="el-icon-search" v-model="searchName" placeholder="商品查询信息"></el-input>
                <el-button type="primary" @click="searchGoods">搜索商品</el-button>
                <el-button class='right' style="margin-bottom:20px;" type="primary" @click="addGoods">添加商品 </el-button>
            </el-form>
            <section class="table">
                <el-table ref="multipleTable" :data="goodsList" tooltip-effect="dark" style="width: 100%">
                    <el-table-column prop="goods_pic" label="商品图片" width="180">
                        <template slot-scope="scope">
                            <img :src="scope.row.goods_pic" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="商品编号" prop="goods_code" width="150">
                    </el-table-column>
                    <el-table-column label="商品名称" prop="goods_name" width="150">
                    </el-table-column>
                    <el-table-column label="商品品牌" prop="brandName" width="120">
                    </el-table-column>
                    <el-table-column prop="goods_price" label="商品价格(元)" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.goods_price" @blur="priceChange(scope.row)" clearable placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="discount_rate" label="商品折扣(折)" width="120">
                    </el-table-column> -->
                    <el-table-column prop="discount_price" label="折扣价格(元)" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.discount_price"  @blur="priceChange(scope.row)" clearable placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="member_price" label="折扣价格(元)" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.member_price"  @blur="priceChange(scope.row)" clearable placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="soldout" label="商品状态" width="120" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.soldout == '0' ? '上架' : '下架'}}
                            <!-- <el-switch change="soldChange" v-model="scope.row.soldout" :on-value="0" :off-value="1"></el-switch> -->
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <!-- <el-button type="text" size="small" @click="$router.push({path:'/editGoods/'+ scope.row.goods_id })">编辑</el-button> -->
                            <el-button type="text" size="small" @click="editGoods(scope)">编辑</el-button>
                            <el-button type="text" size="small" v-if="scope.row.soldout === 0" @click="soldChange(scope.row.goods_id,1,scope.row)">下架</el-button>
                            <el-button type="text" size="small" v-if="scope.row.soldout === 1" @click="soldChange(scope.row.goods_id,0,scope.row)">上架</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <section class="pagination" v-if="total > 5">
                    <el-pagination 
                        background 
                        layout="total,prev,sizes, pager, next,jumper" 
                        :page-sizes="[10, 25, 50, 100]"
                        :page-size="size" 
                        :page-count="Math.ceil(total/size)" 
                        :total="total" 
                        @size-change="handleSizeChange"
                        :current-page.sync="page" @current-change="handlePageChange">
                    </el-pagination>
                </section>
            </section>
        </div>
    </div>
</template>
<script>
import leftBar from "../commonComponents/leftBar.vue";
import { mapActions, mapState } from "vuex";
import {
    updateGoods,
    getCategory,
    getStockGoodsList,
    editGoodsByPc
} from "../../data/postData";
export default {
    components: {
        leftBar
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            form: {
                goods_pic: "",
                goods_code: "",
                category_id: "",
                goods_name: "",
                specs_name: "",
            },
            listStatus:'',
            searchName: "",
            goodsItem: [],
            selGoodItemVal: [],
            isShowGoodsItem: false,
            goodsItem1: [],
            goodsItem2: [],
            goodsItem3: [],
            goodsList: null,
            total: "",
            page: 1,
            size: 10,
            position: [
                {
                    label: "",
                    value: "全部"
                },
                {
                    label: "0",
                    value: "上架"
                },
                {
                    label: "1",
                    value: "下架"
                },
            ]
        };
    },
    mounted() {
        // this.$fetch.get(getCategory + "?categoryId=0").then(res => {
        //     this.goodsItem1 = res.data;
        // });
        var that = this;
        let { goodsListPage,status,name } = this.$store.state.goods;
        this.page = goodsListPage || 1;
        this.listStatus = status || '';
        this.searchName = name || '';

        this.searchRequest(this.page);
    },
    methods: {
        priceChange(val){
            console.log(val)
            if(('' + val.goods_price).trim() === ''){
                this.$message({
                    message: '请输入原价',
                    type: "warning"
                });
            }else if(('' + val.member_price).trim() === ''){
                this.$message({
                    message: '请输入会员价',
                    type: "warning"
                });
            }else if(('' + val.discount_price).trim() === ''){
                this.$message({
                    message: '请输入折扣价',
                    type: "warning"
                });
            }else if(+val.discount_price > +val.goods_price){
                this.$message({
                    message: '折扣价不能大于原价',
                    type: "warning"
                });
                val.discount_price = ''
            }else if(+val.member_price > +val.discount_price){
                this.$message({
                    message: '会员价不能大于折扣价',
                    type: "warning"
                });
                val.member_price = ''
            }else{
                let params = {
                    data:{
                        goodsId: +val.goods_id,
                        memberPrice: +val.member_price,
                        discountPrice: +val.discount_price,
                        goodsPrice: +val.goods_price,
                    }
                }
                this.$fetch.post(editGoodsByPc,params).then(res=>{
                    this.$message({
                        message: '修改成功',
                        type:'success'
                    });
                }).catch(err=>{
                    this.$message({
                        message: res.messgae,
                        type: "warning"
                    });
                })
            }
        },
        // 上下架
        soldChange(id,val,row){
            console.log(val)
            let params = {
                    data:{
                        goodsId: id,
                        soldout: val
                    }
                }
                this.$fetch.post(editGoodsByPc,params).then(res=>{
                    this.$message({
                        message: '修改成功',
                        type:'success'
                    });
                    row.soldout = val
                }).catch(err=>{
                    this.$message({
                        message: res.messgae,
                        type: "warning"
                    });
                })
        },
        handleSizeChange(size){
            this.size = size;
            this.searchRequest(this.page)
        },
        editGoods(scope) {
            this.$router.push({ path: "/editGoods/" + scope.row.goods_id });
        },
        addGoods() {
            this.$router.push({ path: "/addGoods" });
        },
        searchGoods() {
            this.page = 1;
            this.searchRequest(this.page);
            this.$store.dispatch('saveGoodsListName',this.searchName)
            this.$store.dispatch("saveGoodsListPage", this.page);
        },
        hideSel(e) {
            let className = e.target.className;
            if (
                className.search("selList") < 0 &&
                className.search("selGoodsItem") < 0 &&
                className.search("gray") < 0 &&
                className.search("goddsItemSpan") < 0
            ) {
                this.isShowGoodsItem = false;
            }
        },
        handlChangeStatus(){
            this.$store.dispatch('saveGoodsListStatus',this.listStatus)
            this.$store.dispatch("saveGoodsListPage", 1);
            this.page = 1
            this.searchRequest(this.page)
        },
        // 多级项目选择
        selGoodsItem(res) {
            this.isShowGoodsItem = true;
            this.goodsItem2 = [];
            this.goodsItem3 = [];
            this.goodsItem = [];
        },
        loadTwo(val, name) {
            this.goodsItem = [];
            this.goodsItem.push({
                val: val,
                name: name
            });
            this.$fetch.get(getCategory + "?categoryId=" + val).then(res => {
                this.goodsItem2 = res.data;
                console.log("goodsItem3", this.goodsItem3);
            });
        },
        loadTree(val, name) {
            console.log("loadTree");
            this.$fetch.get(getCategory + "?categoryId=" + val).then(res => {
                var res = res.data;
                if (res.status) {
                    if (res.code == 0) {
                        this.goodsItem[1] = {
                            val: val,
                            name: name
                        };
                        this.goodsItem3 = res.data;
                        console.log("goodsItem3", this.goodsItem3);
                    }
                }
            });
        },
        selDone(val, name) {
            this.goodsItem[2] = {
                val: val,
                name: name
            };
            this.isShowGoodsItem = false;
        },
        handlePageChange(page) {
            console.log(page);
            this.page = page;
            this.searchRequest(this.page);
            this.$store.dispatch("saveGoodsListPage", this.page);
        },
        searchRequest(page) {
            this.$store.dispatch('saveGoodsListName',this.searchName)
            var params = {
                data: {
                    page: page || 1,
                    size: this.size,
                    condition: "1",
                    orderby: "1",
                    soldout: this.listStatus,
                    //"storeNo":"S00000001",
                    storeNo: this.user.storeNo,
                    searchName: this.searchName
                }
            };
            this.$fetch
                .post(getStockGoodsList, params)
                .then(res => {
                    console.log(res);
                    this.goodsList = res.data;
                    this.total = res.total;
                })
                .catch(err => {
                    this.$message({
                        message: res.message,
                        type: "warning"
                    });
                });
        }
    }
};
</script>

<style scoped lang="less">
.el-form-item {
    display: inline-block;
}
.pl {
    margin: 10px 0;
}
.page {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.activity-right {
    h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .addGoods {
        margin-bottom: 20px;
        position: absolute;
        right: 0;
        top: 0;
    }
}
.el-form {
    width: 100% !important;
}
.goodsItem {
    position: relative;
    display: inline-block;
    width: 75%;
    .selGoodsItem {
        width: 179px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }
    section {
        position: absolute;
        left: 10px;
        top: 48px;
        background: #fff;
        border: 1px solid #e4e7ed;
        z-index: 99999;
        &:after {
            content: "";
            position: absolute;
            top: -8px;
            left: 75px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 8px solid #e4e7ed;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
        &:before {
            content: "";
            position: absolute;
            top: -6px;
            left: 76px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 6px solid #fff;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            z-index: 99999;
        }
    }
}
.search-2 {
    position: absolute;
    left: 400px;
    bottom: 0px;
    width: 200px;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.table {
    img {
        width: 100px;
    }
}
.jumpPage {
    position: absolute;
    right: 0;
    bottom: 0;
    // width: 300px;
    input,
    .el-input {
        display: inline-block;
    }
}
.search-input {
    width: 200px;
}
.right {
    float: right;
    z-index: 999999999;
}
</style>